<template>
    
    <!-- 组件的模板 -->
    <div class="page user-select multi-select">
      <scroller :lock-y="true" v-ref:scrollerdom>
        <div class="mod-crumbs bg-color scroller-wrap" v-show="hierarchyList.length>0">
          <template v-for="(index,hierarchy) in hierarchyList">
                <template v-if="index<(hierarchyList.length-1)">
                    <a class="nav-item" @click="stepHierarchy(index)">{{hierarchy.department_name}}</a>
                    <span class="arrow nav-item" style="margin:20px 8px;">&gt;</span>
                </template>
                <template v-if="index==(hierarchyList.length-1)">
                    <em class="nav-item">{{hierarchy.department_name}}</em>
                </template>
          </template>
        </div>
      </scroller>
      <ul class="list com-border-bottom com-border-top" style="margin-top:-2px;">
            <li class="weui-cells_checkbox has-hierarchy com-border-bottom" v-for='group in grouplist'>
              <label class="touch" for="{{group.id}}">
                <div class="info com-border-bottom setHui" v-if="group.is_curdepartment == 1" @click="selectGroup(group)">
                    <p class="title">{{group.name}}</p>
                </div>
                <div class="info com-border-bottom"  v-else @click="selectGroup(group)">
                      <p class="title">{{group.name}}</p>
                  </div>
              </label>
              <div class="hierarchy" v-show="group.has_subdepartment == 1 && group.is_curdepartment == 0" @click="stepNext(group.id,group.team_id)">下级</div>
            </li>
      </ul>
    </div>

    <div class="page" v-if="empty">
        <div class="mod-empty">
            <div class="icon icon_1"></div>
            <p class="tip">暂无可选部门</p>
        </div>
    </div> 
     
</template>

<script>

    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import Scroller from 'vux/dist/components/scroller'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
let pageDate = {}
let webViewID = ''
    /**
     *  组件实例对象
     */
    export default {
        components: {
          Scroller
        },
        data: function(){
            return{
                empty:false,
                group:{},
                hierarchyList:[],
                grouplist:[],
                cacheGroupList:[]
            }
        },
        watch: {
          'hierarchyList': function(){
            let allWidth = 0
            this.$nextTick(function () {
              if($('.scroller-wrap .nav-item').length){
                $('.scroller-wrap .nav-item').each(function(i, o){
                  if(o.tagName.toLowerCase() == 'a'){
                    allWidth += (parseInt(o.offsetWidth) + 16)
                  }else{
                    allWidth += parseInt(o.offsetWidth)
                  }
                })
                allWidth += 30
                $('.scroller-wrap').width(allWidth + 'px')

                this.$refs.scrollerdom.reset()
              }
            })
          }
        },
        computed: {
            
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                pageDate.group_id = util.getUrddataString('group_id')
                pageDate.id = util.getUrddataString('id')
                pageDate.teamid = util.getUrddataString('teamid')
                pageDate.department_id = util.getUrddataString('department_id')
                pageDate.backType = util.getUrddataString('backType')
                pageDate.myself = util.getUrddataString('myself')
                
                 this.getGroupList() 

                 commonPage.getWebViewID((data)=>{ 
                    webViewID = data
                })
            },
            /**
             * 当选中小组时，判断该小组的子小组是否被选中，若有被选中的子小组，则清除掉
             * @param  {[type]} group [description]
             * @param  {[type]} event [description]
             * @return {[type]}       [description]
             */
            selectGroup(group){
                console.log(group)
                if(group.is_curdepartment == 0){
                    if(pageDate.backType && pageDate.backType == 1100){
                      cache.getMemoryCache('memberInfoWebViewID',(data)=>{
                        if(data){
                          commonPage.goBack(1,{'key':'selectGroup','value':group,'type':555},data.webViewID)
                        }
                      })
                    }else{
                      cache.getMemoryCache('selectDepartmentWebViewID',(data)=>{
                        if(data){
                          commonPage.goBack(1,{'key':'selectGroup','value':group,'type':555},data.webViewID)
                        }
                      })
                    }
                }
                
            },

            /**
             * 跳转下一级
             * @param  {[type]}
             * @return {[type]}
             */
            stepNext(id,teamid){
                 window.location.href="dmsaas://TeamDepartmentSelect?urdData="+encodeURIComponent(`id=${id}&myself=${1010}&teamid=${teamid}&department_id=${pageDate.department_id}&backType=${pageDate.backType}`)
            },
            /**
             * 点击对应层级 
             * 
             * @return {[type]}
             */
            stepHierarchy(index){
                let leg = this.hierarchyList.length-1
                console.log(index)
                console.log(leg)
                if(index<leg){
                  console.log('webViewID'+index)
                    cache.getMemoryCache('webViewID'+index,(data)=>{
                        if(data){
                           commonPage.goBack(1,{},data.webViewID)
                        }
                    })
                }
            },
            // 获取小组列表
            getGroupList(){
              let _data = {
                  team_id:pageDate.teamid,
                  department_id: pageDate.myself ? pageDate.id : 0,  // 部门id
                  department_only:1,
                  cur_department:pageDate.department_id ? pageDate.department_id : 0
              }
              console.log(_data)
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/team/department_organ', 
                    type:'GET',
                    data:_data,
                    success: (obj) => {
                        console.log(obj)
                        commonPage.loadPageStatus('loadSuccess')
                        if(obj&&obj.errno==0){
                            this.grouplist = obj.data.sub_department
                            let allGroupList = obj.data.sub_department
                            let all = {'department_id':'all','department_name':'全部'}
                            if(this.grouplist.length == 0){
                              this.empty = true
                            }
                             if(pageDate.myself && pageDate.myself == 1010){
                              this.hierarchyList.unshift(all)
                              obj.data.breadcrumb.forEach( (item) => {
                                this.hierarchyList.push(item)
                              })
                              
                              let len = this.hierarchyList.length-1
                              console.log('webViewID'+len)
                              cache.setMemoryCache('webViewID'+len,{'webViewID':webViewID})
                            }else{
                              let len = this.hierarchyList.length
                              console.log('webViewID'+len)
                              cache.setMemoryCache('webViewID'+len,{'webViewID':webViewID})
                            }
                            console.log(this.hierarchyList)
                            cache.setMemoryCache('allGroupList',allGroupList)
                            cache.setMemoryCache('cacheGroupList',this.grouplist)

                            // let len = ''
                            // if(this.hierarchyList.length == 0){
                            //   len = this.hierarchyList.length
                            // }else{
                            //   len = this.hierarchyList.length-1
                            // }
                            
                        }else if(obj.errmsg){
                             widget.toast(obj.errmsg)
                        }else{
                             widget.toast('获取小组数据异常')
                        }
                        
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')

                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /**
             * 跳转搜索页
             * @return {}
             */
            toSearch(){
                window.location.href="dmsaas://GroupSearchSingle"
            }
        },
        created(){
            this.init()
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>

<style>
   
    .weui-cells_checkbox .setHui{
        color:#bbbbbb
    }
    .scroller-wrap .nav-item{
      float: left;
    }
    .mod-crumbs .arrow.nav-item{
    margin: 18px 8px;
  }
    .xs-container{
      background: #fff;
    }
    .com-border-bottom:after{
      height:1.5px;
    }
</style>

